<template>
    <div class="fabu">
        <van-nav-bar title="创建教程" right-text="存草稿" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
        <div ref="content" class="content">
            <div class="main">
                <div class="upload_img" @click="file_click()">
                    <video style="width: 100%; " ref="video" src=""></video>
                    <span v-if="active == 0" style="position: absolute;">+添加教程</span>
                    <input @change="gaibian" type="file" hidden ref="file" @click="dian_file()" id="file1">
                </div>
                <div class="add_title">
                    <input type="text" placeholder="添加标题" maxlength="40" v-model="main_title"
                        style=" border: 0;width: 100%; height:100%;font-size: 18px;margin-left: 4%;">
                </div>
                <div class="jianjie">
                    <span>课程简介</span>
                    <div id="wen_ben" class="wen_ben" ref="wenben" contenteditable="true"></div>
                </div>
                <div class="cai_liao">
                    <div class="cai_liao_side">
                        <div class="need_title">
                            <span>需要什么材料?</span>
                        </div>
                        <div class="need_one" v-for="i,index in 2">
                            <input class="left" placeholder="材料名称" type="text">
                            <div class="right">
                                <div class="tiao"></div>
                                <input type="text" placeholder="用量">
                                <img @click="close_one(index)" style="width: 20px;height: 20px;" src="../lmx/image/close.png" alt="">
                            </div>
                        </div>
                        <div class="add_one">
                            <span style="color: red;font-size: 14px;">再增加一个</span>
                        </div>
                    </div>
                </div>

                <div class="cai_liao">
                    <div class="cai_liao_side">
                        <div class="need_title">
                            <span>需要什么工具?</span>
                        </div>
                        <div class="need_one" v-for="i in 1">
                            <input class="left" placeholder="工具名称" type="text">
                            <div class="right">
                                <div class="tiao"></div>
                                <input type="text" placeholder="用量">
                                <img style="width: 20px;height: 20px;" src="../lmx/image/close.png" alt="">
                            </div>
                        </div>
                        <div class="add_one">
                            <span style="color: red;font-size: 14px;">再增加一个</span>
                        </div>
                    </div>
                </div>
                <div @click="show = true" class="fen_lei">
                    <span style="font-size: 14px;">教程分类</span>
                    <div>
                        <span style="font-size: 14px;">{{fenlei}}</span>
                        <img style="width: 15px;height: 15px;" src="../lmx/image/right.png" alt="">
                    </div>
                </div>
                <van-overlay :show="show" >
                    <div class="wrapper">
                        <div class="block">
                            <van-picker title="标题" :allow-html="true" :columns="columns" @confirm="onConfirm" @cancel="onCancel" />
                        </div>
                    </div>
                </van-overlay>
                <div class="publish_side">
                    <button @click="req">
                        <span style="color: white;">确认发布</span>
                    </button>
                </div>
            </div>
        </div>

    </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Toast } from 'vant'
const router = useRouter()
const onClickLeft = () => { router.go(-1) };
const onClickRight = () => { console.log('草稿箱') }
const file = ref()
const video = ref()
const active = ref(0)
const main_title = ref('')
const wenben = ref()
const show = ref(false)
const fenlei =ref('选择')
const columns = ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华'];
const onConfirm = (value, index) => {
    fenlei.value = value
    show.value = false
    // console.log(value)
    };
const onCancel = () => {
    show.value = false
};
//计算滚动高度
const content = ref()
onMounted(() => {
    let h = document.documentElement.clientHeight || document.body.clientHeight;
    var vdaH = h - 46 + "px"
    const boxOne = content.value
    boxOne.style.height = vdaH
    // console.log(boxOne)
    // console.log(vdaH)
})
watch(() => main_title.value, (newVal, oldVal) => {
    if (newVal.length >= 40) {
        Toast('最多可输入40个字符')
        // alent('最多可输入40个字符')
    }
})
function dian_file() {
    // console.log(file.value.files.length);
    active.value = file.value.files.length
    // console.log(active.value);
}
function file_click() {
    file.value.click()
}
function gaibian() {
    var imgFile = file.value.files[0]
    console.log(imgFile)
    video.value.src = URL.createObjectURL(imgFile)
    console.log(video.value.src = URL.createObjectURL(imgFile))
    active.value++
}
function req(){
    var bbb = document.getElementById('wen_ben')
    console.log(bbb.innerText)
    console.log('发布作品')
}
function close_one(i){
    console.log(i)
}
</script>

<style scoped>
* {
    padding: 0;
    margin: 0;
}

:deep(.van-nav-bar__text) {
    color: black;
}

:deep(.van-nav-bar .van-icon) {
    color: black;
}

.fabu {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.content {
    /* flex: 1; */
    width: 100%;
    overflow: scroll;
}

.main {
    width: 100%;
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.upload_img {
    width: 100%;
    height: 200px;
    background-color: rgb(246, 246, 246);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px;
    overflow: hidden;

}

.add_title {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.jianjie {
    width: 100%;
    /* height: 150px; */
    border-bottom: 1px solid #999;
    display: flex;
    flex-direction: column;
}

.jianjie>span {
    font-size: 16px;
    margin-left: 12px;
}

.wen_ben {
    margin: 10px;
    font-size: 15px;
    line-height: 22px;
    border: solid 1px #999;
}

[contenteditable] {
    outline: 0 solid transparent;
}

.cai_liao {
    width: 100%;
    /* height: 150px; */
    border-bottom: 1px solid #999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cai_liao_side {
    width: 95%;
    height: 90%;
    display: flex;
    flex-direction: column;
}

.need_title {
    width: 100%;
    /* height: 50px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.need_title>span {
    font-size: 14px;
}

.need_one {
    width: 100%;
    height: 70px;
    display: flex;
    border-bottom: 1px solid #999;
    justify-content: space-between;
    align-items: center;
}

.need_one>.left {
    width: 145px;
    height: 30px;
    font-size: 14px;
}

.need_one>.right {
    width: 145px;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tiao {
    width: 1px;
    height: 16px;
    background-color: #999;
}

.add_one {
    width: 100%;
    height: 50px;
    /* border-bottom: 1px solid black; */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.need_one>.right>input {
    width: 100px;
    height: 30px;
}

.fen_lei {
    width: 95%;
    height: 50px;
    border-bottom: 1px solid #999;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.block {
    width: 100%;
    height: 220px;
    background-color: #fff;
}

.publish_side {
    width: 95%;
    height: 100px;
    border-bottom: 1px solid black;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

button {
    width: 95%;
    height: 45px;
    border-radius: 12px;
    background-color: red;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}
</style>